<template>
  <my-ref
      :url="$data.url"
      v-model="table"
      @loaded="procData"
      :multi="$props.multi"
      :page-size="10"
      ref="list"
      name="菜单"
      :store="true"
      v-bind="$attrs"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'menus',hasChildren: 'hasChildren'}"
      @change="v=>$emit('change',v)"
      :readOnly="$props.readOnly"
  >

    <el-table-column label="菜单名称" align="left" class-name="cell-flex">
      <template v-slot="scope">
        <div>{{ scope.row.name }}</div>
      </template>
    </el-table-column>
    <el-table-column align="center" label="菜单链接" prop="url"></el-table-column>
    <el-table-column align="center" label="class" prop="css"></el-table-column>
    <template #query="scope">
      <kv label="名称">
        <el-input v-model="scope.query.name"></el-input>
      </kv>
    </template>
    <template #button>
      <el-button>选择菜单</el-button>
    </template>
  </my-ref>
</template>
<script setup>
/**
 * Created by CodeGenerator at 2021-03-14 15:58:11
 */


defineOptions({
  name: "app-menu-ref",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({"url": ""});


const $props = defineProps({
  readOnly: {type: Boolean},
  multi: {type: Boolean},
  appCode: {type: String}
});


const $model = defineModel({type: [Object, Array]});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const table = $computed({
  get() {
    return $model.value;
  }, set(v) {
    var v = Object.assign(v.getJsType() == "array" ? [] : {}, v);
    $emit("update:modelValue", v);
  }
});

const procData = function (res, op) {
  var json = res.data.data;
  json.forEach(it => {
//如果是组合实体，设置 it.id=...
  });
};

onMounted(function () {
  $data.url = '/sys/app-menu/list?appCode=' + $props.appCode;
})


</script>
